<template>
  <div class="look">
    <!-- 查看组件 -->
    <div>
      <el-drawer title="配置工艺" :visible.sync="DialogVisible" :show-close="false" size="55%" :before-close="handleClose" :destroy-on-close='true'>
        <!-- <hr /> -->
        <el-row style="border-top:1px solid #E4E4E4;border-bottom:1px solid #E4E4E4;">
          <el-col :span="6" style="border-right:1px solid #E4E4E4;">
            <div style="padding-left:20px;border-bottom:1px solid #E4E4E4;width:100%;height:35px;display:flex;align-items:center">添加工艺间</div>
            <el-button type="primary" @click="shipAdd" icon="el-icon-plus" size="mini" style="width:100%;">新增工艺</el-button>
            <div style="height:750px;margin-left:20px;">
              <el-tree :data="roomdata" show-checkbox node-key="id" ref="tree" highlight-current @check-change="selectTreeNode" @node-click="handleCurrentClick" style="position:relative;">
                <span class="custom-tree-node" slot-scope="{ node }">
                  <span>
                    {{ node.label }}{{node.id}}<i class="el-icon-more" style="position:absolute;right:0px;"></i>
                  </span>
                  <div v-if="node.id == current?true:false" style="width:50px;height:50px;position:absolute;right:0px;">
                    <div>编辑</div>
                    <div>删除</div>
                  </div>
                </span>
              </el-tree>
              <div style="margin-top:50px;">
                <p>说明：</p>
                <p>1.删除工艺间判断当前是否绑定了设备，已绑定无法删除，需要先删除设备</p>
                <p>2.设备删除相应报警配置、设备参数均删除，但保留设备历史数据</p>
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div style="display:flex;position:relative;height:35px;align-items:center;padding-left:20px;">
              <span>设备注册</span>
            </div>
            <div style="border-top:1px solid #E4E4E4; height:250px;">
              <el-table :data="deviceData" style="width: 100%" highlight-current-row @row-click="getDeviceDetail">
                <el-table-column align="center" label="序号" type="index" :index="indexMethod" width="50px">
                </el-table-column>
                <el-table-column prop="deviceNo" label="设备编号">
                </el-table-column>
                <el-table-column prop="deviceName" label="设备名称">
                </el-table-column>
                <el-table-column prop="type" label="设备类型">
                </el-table-column>
                <el-table-column align="center" label="操作" width="50px">
                  <template slot-scope="scope">
                    <el-button style="color:#C90010;border:none;" icon="el-icon-delete" circle @click="deleteDevice(scope.row.id)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="border-top:1px solid #E4E4E4; height:480px;margin-top:20px;padding-top:10px;">
              <el-form :model="deviceEditForm" :rules="deviceRules" ref="deviceEditForm" class="demo-ruleForm" label-position="top">
                <div style="display:flex;">
                  <div class="itembox">
                    <el-form-item label="设备编号" prop="deviceNo" class="label-term">
                      <el-input v-model="deviceEditForm.deviceNo" class="term"></el-input>
                    </el-form-item>
                    <el-form-item label="设备类型" prop="type" class="label-term infer">
                      <el-input v-model="deviceEditForm.type" class="term"></el-input>
                    </el-form-item>
                    <el-form-item label="厂商联系人" class="label-term infer">
                      <el-input v-model="deviceEditForm.supplier" class="term"></el-input>
                    </el-form-item>
                    <el-form-item label="安装时间" class="label-term infer">
                      <el-date-picker v-model="deviceEditForm.createDate" type="date" placeholder="选择日期" class="term">
                      </el-date-picker>
                    </el-form-item>
                  </div>
                  <div class="itembox">
                    <el-form-item label="设备名称" prop="deviceName" class="label-term">
                      <el-input v-model="deviceEditForm.deviceName" class="term"></el-input>
                    </el-form-item>
                    <el-form-item label="厂商名称" class="label-term infer">
                      <el-input v-model="deviceEditForm.manufacturer" class="term"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" class="label-term infer">
                      <el-input v-model="deviceEditForm.supplierPhone" class="term"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <el-form-item style="position:relative;bottom:25px;">
                  <el-button type="primary" @click="submitEditForm('deviceEditForm')" size="mini">保存</el-button>
                  <el-button @click="resetForm('ruleForm')" size="mini">取消</el-button>
                  <el-button type="primary" @click="deviceVisible=true" icon="el-icon-plus" size="mini">新增</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="9" style="border-left:1px solid #E4E4E4;">
            <div style="height:35px;display:flex;align-items:center;padding-left:20px;"><span>参数配置</span></div>
            <div style="border-top:1px solid #E4E4E4; height:250px;">
              <el-input placeholder="请输入内容" v-model="input2">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <el-table :data="paramData" style="width: 100%" highlight-current-row @row-click="getAlertDetail">
                <el-table-column prop="name" label="参数名称">
                </el-table-column>
                <el-table-column prop="type" label="所属分类">
                </el-table-column>
                <el-table-column prop="displayName" label="参数标记">
                </el-table-column>
                <el-table-column prop="workmanshipId" label="水厂工艺">
                </el-table-column>
              </el-table>
            </div>
            <div style="border-top:1px solid #E4E4E4; height:480px;margin-top:20px;padding-top:35px;">
              <el-form :model="parmasEditForm" :rules="parmasRules" ref="parmasEditForm" class="demo-ruleForm" label-position="top">
                <div style="display:flex;">
                  <div class="itembox">
                    <el-form-item label="报警日期" prop="date" class="label-term" style="position: relative;bottom:25px;">
                      <el-date-picker v-model="ruleForm.date" type="date" placeholder="选择日期" class="term">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="报警类型 " prop="region" class="label_term">
                      <el-select v-model="ruleForm.region" placeholder="请选择活动区域" class="term">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <div style="position: relative;bottom: 40px;">
                      <el-form-item label="低低限" prop="name" class="label-term infer">
                        <el-input v-model="input2" class="limit">
                        </el-input>
                      </el-form-item>
                      <div style="background:red;color:white;" class="tip">红色报警</div>
                    </div>
                    <div style="position: relative;bottom: 95px;">
                      <el-form-item label="低低限" prop="name" class="label-term infer">
                        <el-input v-model="input2" class="limit">
                        </el-input>
                      </el-form-item>
                      <div style="background:#FEBE00;color:white;" class="tip">黄色报警</div>
                    </div>
                  </div>
                  <div class="itembox">
                    <el-form-item label="报警时间" prop="date" class="label-term" style="position: relative;bottom: 25px;">
                      <el-date-picker v-model="ruleForm.date" type="date" placeholder="选择日期" class="term">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="变化率" prop="name" class="label_term">
                      <el-input v-model="ruleForm.name" class="term"></el-input>
                    </el-form-item>
                    <div style="position: relative;bottom: 40px;">
                      <el-form-item label="低低限" prop="name" class="label-term infer">
                        <el-input v-model="input2" class="limit">
                        </el-input>
                      </el-form-item>
                      <div style="background:#FEBE00;color:white;" class="tip">黄色报警</div>
                    </div>
                    <div style="position: relative;bottom: 95px;">
                      <el-form-item label="低低限" prop="name" class="label-term infer">
                        <el-input v-model="input2" class="limit">
                        </el-input>
                      </el-form-item>
                      <div style="background:red;color:white;" class="tip infer">红色报警</div>
                    </div>
                  </div>
                </div>
                <el-form-item label="是否启用" prop="delivery" class="label-term" style="position:relative;bottom:180px;">
                  <el-switch v-model="delivery" style="position:relative;bottom:50px;"></el-switch>
                </el-form-item>
                <el-form-item style="position:relative;bottom:240px;">
                  <el-button type="primary" @click="submitForm('ruleForm')" size="mini">保存</el-button>
                  <el-button @click="resetForm('ruleForm')" size="mini">取消</el-button>
                  <el-button type="primary" @click="parmasVisible=true" icon="el-icon-plus" size="mini">新增</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <!-- <hr /> -->
        <span style="position:absolute;bottom:30px;right:20px;">
          <el-button type="primary" @click="toAdd" size="mini">确 定</el-button>
          <el-button @click="cancle" size="mini">取 消</el-button>
        </span>
      </el-drawer>
      <!-- 新增工艺表单  -->
      <el-dialog title="新增工艺" :visible.sync="shipVisible">
        <el-form :model="shipform" :rules="shipRules">
          <el-form-item label="工艺名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="shipform.name" autocomplete="off" size="small" style="width:250px;"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="shipform.remarks" autocomplete="off" size="small" style="width:250px;"></el-input>
          </el-form-item>
          <el-form-item label="工艺图片" :label-width="formLabelWidth">
            <el-upload action="" list-type="picture-card" :auto-upload="false" :limit='1' :on-change="handleImageChange" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="shipVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="addShip" size="mini">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增设备表单  -->
      <el-dialog title="新增设备" :visible.sync="deviceVisible">
        <el-form :model="deviceAddForm" :rules="deviceRules" ref="deviceAddForm" class="demo-ruleForm" label-position="top">
          <div style="display:flex;">
            <div class="itembox">
              <el-form-item label="设备编号" prop="deviceNo" class="label-term">
                <el-input v-model="deviceAddForm.deviceNo" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <el-form-item label="设备类型" prop="type" class="label-term">
                <el-input v-model="deviceAddForm.type" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <el-form-item label="设备imei号" class="label-term infer">
                <el-input v-model="deviceAddForm.deviceImei" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <el-form-item label="厂商联系人" class="label-term infer">
                <el-input v-model="deviceAddForm.supplier" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <el-form-item label="安装时间" class="label-term infer">
                <el-date-picker v-model="deviceAddForm.installDate" type="date" placeholder="选择日期" class="term" size="small" style="width:250px;">
                </el-date-picker>
              </el-form-item>
            </div>
            <div class="itembox">
              <el-form-item label="设备名称" prop="deviceName" class="label-term">
                <el-input v-model="deviceAddForm.deviceName" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <el-form-item label="传输方式" class="label-term infer" style="position:relative;top:0px;">
                <el-input v-model="deviceAddForm.transmission" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <el-form-item label="厂商名称" class="label-term infer">
                <el-input v-model="deviceAddForm.manufacturer" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" class="label-term infer">
                <el-input v-model="deviceAddForm.supplierPhone" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="deviceVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="addDevice" size="mini">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增参数表单  -->
      <el-dialog title="新增参数" :visible.sync="parmasVisible" style="height:800px;">
        <el-form :model="parmasAddForm" :rules="deviceRules" ref="parmasAddForm" class="demo-ruleForm" label-position="top">
          <div style="display:flex;">
            <div class="itembox">
              <el-form-item label="报警日期" prop="date" class="label-term" style="position: relative;bottom:25px;">
                <el-date-picker v-model="ruleForm.date" type="date" placeholder="选择日期" class="term" size="small" style="width:250px;">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="报警类型 " prop="region" class="label_term">
                <el-select v-model="ruleForm.region" placeholder="请选择活动区域" class="term" size="small" style="width:250px;">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <div style="position: relative;bottom: 40px;">
                <el-form-item label="低低限" prop="name" class="label-term infer">
                  <el-input v-model="input2" class="limit">
                  </el-input>
                </el-form-item>
                <div style="background:red;color:white;" class="tip">红色报警</div>
              </div>
              <div style="position: relative;bottom: 95px;">
                <el-form-item label="低限" prop="name" class="label-term infer">
                  <el-input v-model="input2" class="limit">
                  </el-input>
                </el-form-item>
                <div style="background:#FEBE00;color:white;" class="tip">黄色报警</div>
              </div>
            </div>
            <div class="itembox">
              <el-form-item label="报警时间" prop="date" class="label-term" style="position: relative;bottom: 25px;">
                <el-date-picker v-model="ruleForm.date" type="date" placeholder="选择日期" class="term" size="small" style="width:250px;">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="变化率" prop="name" class="label_term">
                <el-input v-model="ruleForm.name" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <div style="position: relative;bottom: 40px;">
                <el-form-item label="高限" prop="name" class="label-term infer">
                  <el-input v-model="input2" class="limit">
                  </el-input>
                </el-form-item>
                <div style="background:#FEBE00;color:white;" class="tip">黄色报警</div>
              </div>
              <div style="position: relative;bottom: 95px;">
                <el-form-item label="高限" prop="name" class="label-term infer">
                  <el-input v-model="input2" class="limit">
                  </el-input>
                </el-form-item>
                <div style="background:red;color:white;" class="tip infer">红色报警</div>
              </div>
            </div>
          </div>
          <el-form-item label="是否启用" prop="delivery" class="label-term" style="position:relative;bottom:180px;">
            <el-switch v-model="delivery" style="position:relative;bottom:50px;"></el-switch>
          </el-form-item>
        </el-form>
        <div style="position:absolute;left:250px;bottom:100px;">
          <el-button @click="deviceVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="addDevice" size="mini">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  searchFlScheduleDevice, //查询工艺间设备列表
  addFlScheduleWorkmanship, //添加工艺
  editFlScheduleDevice, //编辑设备
  addFlScheduleDevice, //新增设备管理
  deleteFlScheduleDevice,//删除设备
  searchFlParam, //查询参数列表
  addFlParam, //新增参数
  editFlParam, //编辑参数
  searchFlScheduleAlert //获取报警信息
} from "@/api/schedule/base/flwaterMonitorPoint/index";
export default {
  name: 'examine',
  data () {
    return {
      //监测点id:
      pointId: "",
      //新增工艺表单
      shipVisible: false,
      shipRules: {
        name: [
          { required: true, message: '请输入工艺名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      shipform: {
        name: "",
        remarks: "",
        imgFiles: "",
      },
      input2: "",
      DialogVisible: false,
      direction: 'rtl',
      //工艺间数据
      current: "",
      roomdata: [{
        id: 1,
        label: '',
        children: [{}]
      }],
      //工艺id
      workmanshipId: "",
      //设备列表数据
      deviceData: [],
      deviceid: "",
      //设备编辑表单
      deviceEditForm: {},
      //新增设备表单
      deviceVisible: false,
      deviceAddForm: {},
      //设备表单验证
      deviceRules: {
        deviceNo: [
          { required: true, message: '请输入设备编号', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 2 到 20个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入设备类型', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
      },
      //参数表单数据
      paramData: [],
      //编辑参数
      parmasEditForm: {},
      //新增参数
      parmasVisible: false,
      parmasAddForm: {},
      //参数表单验证
      parmasRules: {

      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
    }
  },
  props: [
    'DialogVisibleMod',
    'pointName',
    'pointShipName',
    "pointId"
    // 'searchOptionTable',
    // 'getFindByTypeData',
  ],
  created () {
    console.log('原因：', modData)
    // this.DialogVisible=JSON.parse(JSON.stringify(this.DialogVisibleMod))
  },
  // mounted () {
  //   document.getElementById('aa').parentNode.style.background = "red"
  // },
  watch: {
    DialogVisibleMod: {
      deep: true,
      handler (newVal, oldVal) {
        console.log(newVal)
        this.DialogVisible = JSON.parse(JSON.stringify(newVal))
      },
    },
    pointName: {
      deep: true,
      handler (value) {
        this.roomdata[0].label = value
      },
    },
    pointShipName: {
      deep: true,
      handler (value) {
        this.roomdata[0].children = value.map((item) => {
          item["label"] = item.name
          item["id"] = item.id
          return item
        })
      },
    },
    pointId: {
      deep: true,
      handler (value) {
        this.pointId = value
      }
    }
  },
  methods: {
    //添加图片调用函数
    handleImageChange (file) {
      this.shipform.imgFiles = file.raw;
    },
    cancle () {
      this.DialogVisible = false
      this.$emit('cancleData')
    },
    //工艺间树结构懒加载
    // loadNode (node, resolve) {
    //   if (node.level === 0) {
    //     return resolve([{ name: 'region' }]);
    //   }
    //   if (node.level > 1) return resolve([]);

    //   setTimeout(() => {
    //     const data = [{
    //       name: 'leaf',
    //       leaf: true
    //     }, {
    //       name: 'zone'
    //     }];

    //     resolve(data);
    //   }, 500);
    // },
    //新增工艺弹出框
    shipAdd () {
      this.shipVisible = true
    },
    //新增工艺表单
    addShip () {
      let formData = new FormData()
      formData.append("name", this.shipform.name);
      formData.append("remarks", this.shipform.remarks);
      formData.append("imgFiles", this.shipform.imgFiles);
      formData.append("monitorPointId", this.pointId);
      addFlScheduleWorkmanship(formData).then(response => {
        this.$message(response.message);
        this.shipVisible = false;
      }).catch(error => {
        alert("获取失败");
      });
    },
    //获取当前点击树节点
    handleCurrentClick (v) {
      this.current = v.id
      console.log(v)
      debugger
    },
    //当前树节点被选中
    selectTreeNode (data, checked, indeterminate) {
      if (checked) {
        if (data.length == 0) {
          this.selectTreeOption = data
        }
        const arr = [data.id]
        this.$refs.tree.setCheckedKeys(arr)
        this.workmanshipId = data.id
        this.getDevice()
      }
    },
    getDevice () {
      let pointId = this.pointId
      let workmanshipId = this.workmanshipId
      searchFlScheduleDevice(pointId, workmanshipId).then(response => {
        console.log(response);
        this.deviceData = response.data
      }).catch(error => {
        alert("获取失败");
      });
    },
    //点击设备表格获取设备详情
    getDeviceDetail (row) {
      this.deviceEditForm = row
      let id = row.id
      searchFlParam(id).then(response => {
        console.log(response);
        this.paramData = response.data
      }).catch(error => {
        alert("获取失败");
      });
    },
    //点击参数表格获取报警信息
    getAlertDetail (row) {
      let id = row.id
      searchFlScheduleAlert(id).then(response => {
        console.log(response);
        this.paramData = response.data
      }).catch(error => {
        alert("获取失败");
      });
    },
    //点击保存 
    submitEditForm () {
      console.log(this.deviceEditForm)
      let id = this.deviceEditForm.id
      editFlScheduleDevice(id, this.deviceEditForm).then(response => {
        this.$message(response.message);;
      }).catch(error => {
        alert("获取失败");
      });
    },
    //新增设备
    addDevice () {
      this.deviceAddForm['workmanshipId'] = this.workmanshipId
      this.deviceAddForm['monitorPointId'] = this.pointId
      addFlScheduleDevice(this.deviceAddForm).then(response => {
        this.$message(response.message);
        this.deviceVisible = false;
      }).catch(error => {
        alert("获取失败");
      });
      this.getDevice()
    },
    //删除设备
    deleteDevice (id) {
      // let arrId = [id];
      this.$confirm("确认删除？").then(_ => {
        deleteFlScheduleDevice(id).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        });
        done();
      }).catch(_ => { });
      this.getDevice()
    },
    handleClose (done) {
    },
    confirm () {
      this.DialogVisible = false
      console.log('1111')
      this.$emit('examineDialog', this.DialogVisible)
    },
  },
  computed: {
    // 字典计算属性
    optionDatass () {
      return function (arr, val, EN, data) {
        // console.log(arr,val,EN,'99999');

        // console.log(arr[val],'why');
        // 判断特殊
        if (EN == 'sysCompanyCode') {
          const getFindByTypeData = this.getFindByTypeData
          console.log(getFindByTypeData, 9999999999)

          for (let i = 0; i < getFindByTypeData.length; i++) {
            const element = getFindByTypeData[i]
            if (getFindByTypeData[i].sysCompanyCode == val) {
              return getFindByTypeData[i].name
            }
          }
        }
        if (arr) {
          if (
            EN == 'meterreader' &&
            data.isMeterreaderMultiple &&
            val.includes(',')
          ) {
            val = val.split(',')
            let names = ''
            console.log('val：：', val)
            for (let j = 0; j < val.length; j++) {
              for (let i = 0; i < arr.length; i++) {
                if (val[j] == arr[i].value) {
                  names += arr[i].label + ','
                }
              }
            }
            return names.substring(0, names.length - 1)
          } else {
            for (let i = 0; i < arr.length; i++) {
              if (arr[i].value == val) {
                return arr[i].label
              }
            }
          }
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.itembox {
  width: 50%;
  // position: relative;
  // bottom: 20px;
}
.label_term {
  position: relative;
  bottom: 50px;
  margin-left: 15px;
}
.infer {
  position: relative;
  bottom: 25px;
}
.label-term {
  margin-left: 15px;
}
.term {
  width: 145px;
  position: relative;
  right: 80px;
  bottom: 10px;
}
.tip {
  height: 40px;
  width: 95px;
  text-align: center;
  padding-top: 10px;
  position: relative;
  bottom: 102px;
  left: 67px;
}
.limit {
  width: 50px;
  position: relative;
  right: 78px;
  bottom: 15px;
}
.look {
  .lookAll {
    // max-height: 500px;
    // overflow: hidden;
    .list {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      .fon {
        width: 16.55%;
        text-align: right;
        margin-right: 20px;
      }
      .inb {
        width: 83.45%;
      }
    }
  }
}
</style>
